<template>
    <view class="container" :style="themeColor">
        <view class="main">
            <view class="custom-cell">
                <text class="cell-label">发票类型</text>
                <view class="cell-main">
                    <label class="css-raleb"
                        ><radio class="radio" :color="radioColor" value="r1" checked="true" />电子发票</label
                    >
                </view>
            </view>
            <view class="css-greycontent">电子发票与纸质发票具有相同的法律效力，可以作为报销，售后的凭证。 </view>
        </view>
        <view class="main">
            <view class="custom-cell">
                <text class="cell-label">发票抬头</text>
                <radio-group @change="changeradio" class="cell-main">
                    <label v-for="(item, index) in radioItems" :key="index" class="radio-label">
                        <radio class="radio" :value="item.value" :checked="item.radio" :color="radioColor"> </radio>
                        <text>{{ item.name }}</text>
                    </label>
                </radio-group>
            </view>
            <view class="custom-cell">
                <text class="cell-label">{{ selectRadio === "0" ? "个人名称" : "企业名称" }}</text>
                <view class="cell-main"
                    ><input class="cell-input" type="text" v-model="data.Name" placeholder="请填写名称"
                /></view>
            </view>
            <view class="custom-cell" v-if="selectRadio === '1'">
                <text class="cell-label">识别号</text>
                <view class="cell-main"
                    ><input class="cell-input" type="text" v-model="data.TaxRegNo" placeholder="请输入纳税人识别号"
                /></view>
            </view>
            <view class="custom-cell">
                <text class="cell-label">手机号码</text>
                <view class="cell-main">
                    <input class="cell-input" type="text" v-model="data.Phone" placeholder="请填写联系人的手机号码" />
                </view>
            </view>
            <view class="custom-cell">
                <text class="cell-label">邮箱地址</text>
                <view class="cell-main">
                    <input class="cell-input" type="text" v-model="data.EMail" placeholder="请填写邮箱地址" />
                </view>
            </view>
            <view v-if="selectRadio === '1'">
                <view class="custom-cell">
                    <text class="cell-label">开户银行</text>
                    <view class="cell-main">
                        <input class="cell-input" type="text" v-model="data.BankName" placeholder="请输入开户银行" />
                    </view>
                </view>
                <view class="custom-cell">
                    <text class="cell-label">银行卡号</text>
                    <view class="cell-main">
                        <input class="cell-input" type="text" v-model="data.IdNumber" placeholder="请输入银行卡号" />
                    </view>
                </view>
                <view class="custom-cell">
                    <text class="cell-label">企业电话</text>
                    <view class="cell-main">
                        <input
                            class="cell-input"
                            type="text"
                            v-model="data.RecipientMobile"
                            placeholder="请输入企业电话" />
                    </view>
                </view>
                <view class="custom-cell">
                    <text class="cell-label">企业地址</text>
                    <view class="cell-main">
                        <input class="cell-input" type="text" v-model="data.Address" placeholder="请输入企业地址" />
                    </view>
                </view>
            </view>
        </view>

        <view class="css-raleb">开票须知:</view>
        <view class="css-greytip">1. 目前可开具的发票类型为电子增值税普通发票</view>
        <view class="css-greytip">2. 开票金额为用户实际支付的金额</view>
        <view class="css-greytip">3. 电子发票会在发货后30个工作日发至收件人邮箱</view>
        <view class="css-greytip"
            >4.
            2017年7月1日起，购买方为企业的，索取增值税普通发票时，需提供纳税人识别号或统一社会信用代码。纳税人识别号。</view
        >
        <view class="h200" />

        <view class="bottom-bar">
            <text class="btn btn-success" @click="save">确认</text>
        </view>
        <uni-popup ref="popup" type="bottom">
            <view class="popup-content paddingBottomBar">
                <view class="css-potitle">确认开票信息</view>
                <uni-icons class="icon-close" size="48" type="closeempty" @click="closePopup"></uni-icons>
                <view class="px">
                    <view class="custom-cell">
                        <text class="cell-label">发票类型</text>
                        <view class="cell-main">电子发票</view>
                    </view>
                    <view class="custom-cell">
                        <text class="cell-label">抬头</text>
                        <view class="cell-main">{{ taitou }}</view>
                    </view>
                    <view class="custom-cell">
                        <text class="cell-label">邮箱</text>
                        <view class="cell-main">{{ data.EMail }}</view>
                    </view>
                </view>
                <view class="bottom-bar">
                    <text class="btn btn-success" @click="submit()">确认提交</text>
                </view>
            </view>
        </uni-popup>
    </view>
</template>

<script>
import areaSelect from "@/uni-sub-base/components/area-select/area-select.vue"
import { SaveOrderInvoice, GetInvoiceModel, GetOrderInvoice, SaveInvoice } from "@/service/api/order.js"

import { getLocation } from "@/uni-sub-base/utils/mapUtil.js"

export default {
    components: {
        areaSelect,
    },
    data() {
        return {
            orderIds: "", //要开票的所有订单id
            InvoicePrice: 0, //开票金额
            radioItems: [
                {
                    value: "0",
                    name: "个人/非企业单位",
                    radio: true,
                },
                {
                    value: "1",
                    name: "企业单位",
                    radio: false,
                },
            ],
            selectRadio: "1",
            data: {
                OrderInvoiceHeadType: 1, // 1个人 2公司
            },
            id: 0, // 查询用户发票信息的id
            isEidt: false,
            page: {
                num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
                size: 10, // 每页数据的数量
                time: null, // 加载第一页数据服务器返回的时间; 防止用户翻页时,后台新增了数据从而导致下一页数据重复;
            },

            requestData: {
                searchKey: "",
                startTime: "",
                endTime: "",
                timeSearchType: 0,
                businessId: 0,
            },
            type: "detail", // info 开票信息  detail 开票详情
            taitou: "",
            radioColor: "",
            form: "",
        }
    },
    onLoad(e) {
        if (e.id) {
            this.id = parseInt(e.id)

            this.isEidt = true
            uni.setNavigationBarTitle({
                title: "编辑发票",
            })
            //获取发票详情
            this.getbilldata()
        } else {
            uni.setNavigationBarTitle({
                title: "开具发票",
            })
            this.isEidt = false
            //获取用户发票信息
            this.getuserInvoiceModel()
        }
        if (e.orderIds) {
            this.orderIds = e.orderIds
        }
        if (e.invoicePrice) {
            this.invoicePrice = e.invoicePrice
        }
        if (e.type) {
            this.type = e.type
            if (this.type == "info") {
                uni.setNavigationBarTitle({
                    title: "填写发票信息",
                })
            }
        }
        if (e.form) {
            this.form = e.form
        }
    },
    created() {
        this.radioColor = this.$store.state.themeColor
    },
    mounted() {},
    methods: {
        //新开发票，或者开票信息进来，，获取用户发票信息
        getuserInvoiceModel() {
            GetInvoiceModel().then((res) => {
                if (res.State == 1) {
                    this.data = res.Data
                    this.data.Name = res.Data.InvoiceHead
                    this.taitou = this.data.Name
                    this.data.OrderInvoiceHeadType = res.Data.OrderInvoiceHeadType
                    this.selectRadio = this.data.OrderInvoiceHeadType === 1 ? "0" : "1"
                    this.radioItems[0].radio = this.data.OrderInvoiceHeadType === 1 ? true : false
                    this.radioItems[1].radio = this.data.OrderInvoiceHeadType === 2 ? true : false
                }
            })
        },

        // 编辑进来,获取发票详情信息
        getbilldata() {
            let param = {
                id: this.id,
            }
            GetOrderInvoice(param).then((res) => {
                if (res.State == 1) {
                    this.data = res.Data
                    this.taitou = this.data.Name
                    this.selectRadio = this.data.OrderInvoiceHeadType === 1 ? "0" : "1"
                    this.radioItems[0].radio = this.data.OrderInvoiceHeadType === 1 ? true : false
                    this.radioItems[1].radio = this.data.OrderInvoiceHeadType === 2 ? true : false
                } else {
                    this.easyToast(res.Msg)
                }
            })
        },

        changeradio(e) {
            this.selectRadio = e.detail.value
            this.data.OrderInvoiceHeadType = e.detail.value === "0" ? 1 : 2
        },

        //保存
        save() {
            this.taitou = this.data.Name
            // 必填值校验
            if (this.data.Name.trim() == "") {
                this.easyToast("请填写名称")
                return
            }
            if (this.data.Phone.trim() == "") {
                this.easyToast("请填写手机号码")
                return
            }
            if (this.data.EMail.trim() == "") {
                this.easyToast("请填写邮箱地址")
                return
            }
            if (this.selectRadio === "1") {
                if (this.data.TaxRegNo.trim() == "") {
                    this.easyToast("请填写纳税人识别号")
                    return
                }
                if (this.data.BankName.trim() == "") {
                    this.easyToast("请填写开户银行")
                    return
                }
                if (this.data.IdNumber.trim() == "") {
                    this.easyToast("请填写银行卡号")
                    return
                }
                if (this.data.RecipientMobile.trim() == "") {
                    this.easyToast("请填写企业电话")
                    return
                }
                if (this.data.Address.trim() == "") {
                    this.easyToast("请填写企业地址")
                    return
                }
            }
            this.$refs.popup.open()
        },
        closePopup() {
            this.$refs.popup.close()
        },
        //提交申请
        submit() {
            // 新开发票
            if (!this.isEidt && this.type != "info") {
                this.data.orderIds = this.orderIds
                this.data.invoicePrice = this.invoicePrice
                this.data.ID = 0
            }
            if (this.data.OrderInvoiceHeadType === 1) {
                this.data.Address = ""
                this.data.BankName = ""
                this.data.IdNumber = ""
                this.data.RecipientMobile = ""
                this.data.TaxRegNo = ""
                this.data.OrderInvoiceHeadTypeName = "个人"
            } else {
                this.data.OrderInvoiceHeadTypeName = "企业"
            }
            if (this.type == "info") {
                // 用户开票信息修改
                this.data.InvoiceHead = this.data.Name
                delete this.data.Name
                SaveInvoice(this.data).then((res) => {
                    if (res.State == 1) {
                        this.easyToast("发票信息提交成功")
                        setTimeout(() => {
                            if (this.form == "me") {
                                this.easyGoBack()
                            } else {
                                this.easyGoTo(`/pages_me/packet/billing/index`)
                            }
                        }, 1500)
                    } else {
                        this.easyToast(res.Msg)
                    }
                })
            } else {
                delete this.data.InvoiceType
                delete this.data.InvoiceHead
                SaveOrderInvoice(this.data).then((res) => {
                    if (res.State == 1) {
                        this.easyToast("提交成功")
                        setTimeout(() => {
                            this.easyReLaunch(`/pages_me/packet/billing/creatSuccess`)
                        }, 1500)
                    } else {
                        this.easyToast(res.Msg)
                    }
                })
            }
        },
    },
}
</script>

<style lang="scss">
.container {
    padding: $app-page-padding;
}

.main {
    margin-bottom: 40rpx;
    background: $color-white;
    border-radius: $border-radius-10;
}

.action-bar {
    display: flex;
    flex-direction: column;

    .btn {
        margin-left: 0;
        margin-bottom: 20rpx;
        height: 80rpx;
        font-size: 32rpx;
    }
}

.custom-cell {
    display: flex;
    flex-direction: row;
    align-items: center;
    min-height: 66rpx;
    padding: $app-page-padding;
    border-bottom: solid 1rpx $uni-bg-color-grey;

    &:last-child {
        border-bottom: 0;
    }

    .cell-label {
        display: flex;
        flex: 1;
        color: #333333;
        font-weight: Medium;
        font-size: 30rpx;
    }

    .cell-main {
        display: flex;
        flex: 3;
        overflow: hidden;

        .cell-value {
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: $app-color-text-desc;
            font-size: $font-size-28;
        }

        .cell-input {
            color: $app-color-text-desc;
            font-size: $font-size-28;
            width: 100%;
        }
    }

    .cell-textarea {
        height: 160rpx;
        color: $app-color-text-desc;
        font-size: $font-size-28;
    }

    .icon-location {
        padding: $app-page-padding;
        margin-right: -$app-page-padding;
    }
}

.card-cell {
    margin-bottom: 40rpx;
}

.cell-switch {
    transform: scale(0.8);
}
.css-greycontent {
    color: #999999;
    font-size: 28rpx;
    height: 100rpx;
    line-height: 40rpx;
    margin: 20rpx;
}
.radio-label {
    margin-right: 30rpx;
}
.css-raleb {
    font-size: 29rpx;
}
.css-greytip {
    color: #999999;
    font-size: 28rpx;
    height: 50rpx;
    line-height: 50rpx;
}
.bottom-bar {
    .btn {
        width: 100%;
        margin-left: 0;
        border-radius: 100rpx;
        height: 88rpx;
        font-size: 32rpx;
    }
}
.h200 {
    height: 200rpx;
    width: 100%;
}
// 弹窗组件
.popup-content {
    // display: flex;
    position: relative;
    background: $color-white;
    border-radius: 40rpx 40rpx 0 0;
    padding-top: 20rpx;
    max-height: 60vh;
    z-index: 0;
}
.css-potitle {
    text-align: center;
    font-size: 34rpx;
    font-weight: Medium;
    height: 48rpx;
    line-height: 48rpx;
    color: #333333;
}
.icon-close {
    position: fixed;
    top: $app-page-padding;
    right: $app-page-padding;
    z-index: 1;
}
</style>
